<template>
    <div>
        <baidu-map class="map" :center="center" :zoom="zoom" @ready="handler" @load="loadding" :scroll-wheel-zoom="true"
                  >
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="false" :autoLocation="true"

                            @locationSuccess="getLoctionSuccess" @locationError="getLocationError">
            </bm-geolocation>
            <!-- 自定义定位图标覆盖物 -->
            <bm-marker :position="autoLocationPoint"
                       v-if="initLocation">
            </bm-marker>
        </baidu-map>
    </div>
</template>

<script>
    export default {
        name: "bmap",
        data () {
            return {
                map :{},
                zoom: 15,
                center: {lng: 0, lat: 0},
                loadding: false,
                // 省略一部分
                autoLocationPoint: {lng: 0, lat: 0},
                initLocation: false,
            }
        },
        created(){
        },
        methods: {
            handler ({BMap, map}) {
                let _this = this;	// 设置一个临时变量指向vue实例，因为在百度地图回调里使用this，指向的不是vue实例；
                _this.map = new BMap.Map("map"); // 创建Map实例
                _this.map.setMapStyleV2({
                    styleId: '4c1378f217ee7451c5dc36524e1a9fcd'
                });
                var geolocation = new BMap.Geolocation();
                geolocation.getCurrentPosition(function(r){
                    console.log(r);
                    _this.center = {lng: r.longitude, lat: r.latitude};		// 设置center属性值
                    _this.autoLocationPoint = {lng: r.longitude, lat: r.latitude};		// 自定义覆盖物
                    _this.initLocation = true;
                    console.log('center:', _this.center)	// 如果这里直接使用this是不行的
                },{enableHighAccuracy: true})
            },
            getLoctionSuccess(){

            },
            getLocationError(){

            },
        }
    }
</script>

<style scoped>
    .map {
        width: 100%;
        height: 700px;
    }
</style>
